<style lang="scss" scope>
// 引入公共变量及方法
// @import '~common/scss/public/base-url.scss';
// .clean-reads {
//     .clean-pic  {
//         text-align: center;
//         border-bottom: 20px solid #FFF;
//         p {
//             height:40px;
//             background:#2B3245;
//             padding-top: 10px;
//             color: #fff;
//         }
//         img {
//             &:hover {
//                 cursor:pointer;
//             }
//         }
//     }
//     .clean-cont {
//         .tab-cont {
//             border-bottom: 20px solid #FFF;
//             h5 {
//                 text-align: center;
//                 font-size: 20px;
//                 padding:10px;
//                 background:#fff;
//             }
//         }
//     }
// }
// .clean-reads {
//     .el-table th.is-leaf {
//         background:#2B3245;
//     }
//     .el-table th .cell {
//         background:#2B3245;
//         color:#fff;
//     }
// }
.clean-inner {
    margin-bottom: 20px;
}

.clean-title {
    margin: 0 auto 20px;
    font-size: 18px;
    color: #666;
    text-align: center;
    font-weight: 600;
}

.cleanPic {
    height: auto;
    background: #ffffff;
    border-radius: 10px;
    padding: 30px;
    padding-bottom: 20px;
    box-shadow: 0 0 10px 0 #cfcfcf;
    text-align: center;
}
</style>
<template>
    <div>
        <div class='clean-inner' v-if="picList.length!=0">
            <div class='clean-title'>{{picTitle}}</div>
            <div class="cleanPic" v-for="item in picList" :key="item.displayName">
                <img :src="imgUrl+item.fileName" alt="点击查看大图" height="400" width="400">
            </div>
        </div>
        <div class='clean-inner' v-if="tableListFirst.length!=0">
            <div class='clean-title'>{{tableTitleFirst}}</div>
            <div style="box-shadow: 0 0 10px 0 #cfcfcf;border-radius:10px;overflow: hidden;">
            <el-table :data="tableListFirst" border default-expand-al="true" height="300">
                <el-table-column prop="fieldname" label="名称"></el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
                <el-table-column prop="zd_1" label="数值"></el-table-column>
            </el-table>
            </div>
        </div>
        <div class='clean-inner' v-if="tableListSecond.length!=0">
            <div class='clean-title'>{{tableTitleSecond}}</div>
            <div style="box-shadow: 0 0 10px 0 #cfcfcf;border-radius:10px;overflow: hidden;">
            <el-table :data="tableListSecond" border default-expand-al="true" height="300">
                <el-table-column prop="fieldname" label="名称"></el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
                <el-table-column prop="zd_1" label="数值"></el-table-column>
            </el-table>
            </div>
        </div>
        <div class='clean-inner' v-if="tableListThree.length!=0">
            <div class='clean-title'>{{tableTitleThree}}</div>
            <div style="box-shadow: 0 0 10px 0 #cfcfcf;border-radius:10px;overflow: hidden;">
            <el-table :data="tableListThree" border default-expand-al="true" height="300">
                <el-table-column prop="fieldname" label="名称"></el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
                <el-table-column prop="zd_1" label="数值"></el-table-column>
            </el-table>
            </div>
        </div>
        <Modal v-model="picCLeanShowModal" width="600" :mask-closable="false">
            <div class="pic-show" v-model="picModal">
                <img :src="src" width="600">
            </div>
        </Modal>
    </div>
</template>
<script>
// 引入任务管理方法
import {
    task
} from 'api/index.js'
// 全局图片路径
import { imgUrl } from '@/common/js/Base.js'
export default {
    name: "quality-control",
    data() {
        return {
            imgUrl: imgUrl.imgurl,   // 图片路径前缀
            cleanShow: true,
            picCLeanShowModal: false,   // 图片大图弹层
            picModal: {},
            picTitle: null,             // 图片标题
            picList: [],               // 图片数据
            tableListFirst: [],
            tableTitleFirst: null,
            tableListSecond: [],
            tableTitleSecond: null,
            tableListThree: [],
            tableTitleThree: null,
            src: "",
        }
    },
    // 实例创建时
    created() {
        this.getJobProgressInfoById();
    },
    watch: {

    },
    methods: {
        clickLookPic() {
            this.picModal = this.picList[0];
            this.picCLeanShowModal = true;
            this.src = this.imgUrl + this.picModal.fileName
        },
        getJobProgressInfoById() {
            let obj = {
                jobId: this.$store.state.jobid,   //'d675a7fb68e845859ca5d334775964d7'
                analysisStep: "13"
            }
            // console.log(obj); 
            task.getTaskInfoById(obj).then((data) => {
                console.log(JSON.stringify(data));
                if (data.returnCode == 0 || data.returnCode == 200) {
                    let obj = data.data.jobProcessDataList;
                    if (obj.length <= 0) {
                        this.cleanShow = false;
                    } else {
                        M.each(obj, (item, index) => {
                            if (item.tableType == '4') {
                                this.picTitle = item.tableName;
                                this.picList = item.files;
                            } else {
                                if (index == 0) {
                                    this.tableListFirst = item.files[0].jsonData.data;
                                    this.tableTitleFirst = item.files[0].displayName;
                                } else if (index == 1) {
                                    // console.log(item);
                                    this.tableListSecond = item.files[0].jsonData.data;
                                    this.tableTitleSecond = item.files[0].displayName;
                                } else if (index == 2) {
                                    console.log(item);
                                    this.tableListThree = item.files[0].jsonData.data;
                                    this.tableTitleThree = item.files[0].displayName;
                                }
                            }
                        })
                    }
                } else if (data.returnCode == 422 || data.returnCode == 204) {
                    this.$router.push('/login')
                } else {
                    this.$Message.error(data.msg)
                }

            })
        },
    }
}

</script>